<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>模拟多级反馈队列</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }

    html {
      background: url(img/bg.jpg) no-repeat center center fixed;
      background-size: cover;
    }

    #work-room {
      position: absolute;
      left: 200px;
      top: 100px;
      width: 600px;
      height: 600px;
      background: url(img/workbox.png) no-repeat center center;
      background-size: cover;
    }

    .box {
      height: 60px;
      width: 60px;
      display: inline-block;
      margin: 5px;
      background-color: white;
      overflow: hidden;
      font-size: xx-small;
      text-align: center;
    }

    .row1 {
      position: absolute;
      left: 100px;
      top: 160px;
    }

    .row2 {
      position: absolute;
      left: 100px;
      top: 260px;
    }

    .row3 {
      position: absolute;
      left: 100px;
      top: 390px;
    }

    .row {
      position: absolute;
      width: 400px;
      overflow: hidden;
      white-space: nowrap;
    }

    #pointer {
      position: absolute;
      width: 100px;
      height: 100px;
      background: url(img/pointer.png) no-repeat center center;
      background-size: cover;
      left: 150px;
    }

    .pointer1 {
      top: 260px;
    }

    .pointer2 {
      top: 350px;
    }

    .pointer3 {
      top: 460px;
    }

    #runner {
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      width: 100px;
      height: 100px;
      border-radius: 50px;
      background-color: aquamarine;
      left: 600px;
      top: 80px;
      cursor: pointer;
    }

    #adder {
      background-color: bisque;
      position: absolute;
      padding: 0 20px;
      text-align: center;
      left: 300px;
      top: 90px;
      z-index: 1;
      padding: 10px;
    }
  </style>
  <link rel="stylesheet" href="css/progressbar.min.css">
</head>

<body>

  <div id="main"></div>
  <!-- <div id="work-room">
    <div class="row row1">
      <div class="box" style="background-color:aquamarine"></div>
      <div class="box" style="background-color:bisque"></div>
      <div class="box" style="background-color:coral"></div>
      <div class="box" style="background-color:aquamarine"></div>
      <div class="box" style="background-color:bisque"></div>
      <div class="box" style="background-color:coral"></div>
    </div>

    <div class="row row2">
      <div class="box" style="background-color:aquamarine"></div>
      <div class="box" style="background-color:bisque"></div>
      <div class="box" style="background-color:coral"></div>
    </div>

    <div class="row row3">
      <div class="box" style="background-color:aquamarine"></div>
      <div class="box" style="background-color:bisque"></div>
      <div class="box" style="background-color:coral"></div>
    </div>
  </div> -->
</body>

<script src="./out.js"></script>
<script>
  const node = document.getElementById('main')
  const app = Elm.Main.embed(node)
</script>

</html>